---
title: Thématisation
description: Utilisation et personnalisation des thèmes
---

# Thématisation

## Utilisation et personnalisation des thèmes

Vous pouvez ajuster l'interface utilisateur de RainbowKit pour correspondre à votre image de marque. Vous pouvez choisir parmi quelques couleurs d'accent prédéfinies et configurations de rayon de bordure.

Il y a 3 fonctions de thème intégrées :

- `lightTheme` &nbsp; (par défaut)
- `darkTheme`
- `midnightTheme`

Une fonction thème retourne un objet thème. Vous pouvez passer l'objet à la prop `theme` du `RainbowKitProvider`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Si vous le souhaitez, vous pouvez transmettre `accentColor`, `accentColorForeground`, `borderRadius`, `fontStack` et `overlayBlur` pour les personnaliser.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider
    theme={darkTheme({
      __accentColor__: '#7b3fe4',
      __accentColorForeground__: 'white',
      __borderRadius__: 'small',
      __fontStack__: 'system',
      __overlayBlur__: 'small',
    })}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```

### Personnalisation des thèmes intégrés

Les fonctions de thème intégrées acceptent également un objet d'options, vous permettant de choisir parmi plusieurs styles visuels différents.

<PropsTable
  data={[
    {
      name: 'accentColor',
      required: false,
      default: '"#0E76FD"',
      type: 'string',
      description:
        'La couleur de fond/texte de divers éléments interactifs.',
    },
    {
      name: 'accentColorForeground',
      required: false,
      default: '"white"',
      type: 'string',
      description:
        'La couleur utilisée pour les éléments de premier plan rendus au-dessus de la couleur d\'accent.',
    },
    {
      name: 'borderRadius',
      required: false,
      default: 'large',
      type: '"none" | "small" | "medium" | "large"',
      typeSimple: 'enum',
      description: 'La taille de l\'ensemble de l\'échelle du rayon de bordure.',
    },
    {
      name: 'fontStack',
      required: false,
      default: 'rounded',
      type: '"rounded" | "system"',
      typeSimple: 'enum',
      description:
        "La pile de polices utilisée dans l'UI. Notez que `rounded` tente d'utiliser SF Pro Rounded, en revenant aux polices système quand elle n'est pas disponible.",
    },
    {
      name: 'overlayBlur',
      required: false,
      default: 'none',
      type: '"large" | "small" | "none"',
      typeSimple: 'enum',
      description: 'Le flou de fond modale.',
    },
  ]}
/>

Par exemple, pour personnaliser le thème sombre avec une couleur d'accent violet et un rayon de bordure `medium` :

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Chaque thème propose également plusieurs préréglages de couleurs d'accent (`blue`, `green`, `orange`, `pink`, `purple`, `red`) qui peuvent être intégrés dans l'objet d'options. Par exemple, pour utiliser le préréglage de couleur d'accent `pink` :

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.pink,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### Exemples

#### Fonction thème

Voici quelques façons différentes d'utiliser la prop `theme`.

Utilisez le thème `darkTheme`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={darkTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

Utilisez le thème `midnightTheme`.

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

export const App = () => (
  <RainbowKitProvider theme={midnightTheme()} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>
);
```

#### Couleur d'accent

Voici quelques façons différentes d'utiliser la configuration `accentColor`.

Définissez la couleur d'accent sur une valeur violette personnalisée.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Définissez la couleur d'accent sur le préréglage intégré `green`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        ...darkTheme.accentColors.green,
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Rayon de bordure

Voici quelques façons différentes d'utiliser la configuration `borderRadius`.

Définissez le rayon de bordure sur `medium`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'medium',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

Définissez le rayon de bordure sur `none`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        borderRadius: 'none',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

> Rappel : les valeurs disponibles pour le rayon de bordure sont : `large` (par défaut), `medium`, `small` et `none`.

#### Pile de polices

Par défaut, la `fontStack` est définie sur `rounded`. Mais voici comment vous pouvez utiliser la configuration `fontStack`.

Définissez la pile de polices sur `system`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Flou de superposition

Par défaut, le `overlayBlur` est défini sur `none`. Mais voici comment vous pouvez utiliser la configuration `overlayBlur`.

Définissez le flou de superposition sur `small`.

```tsx
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={darkTheme({
        overlayBlur: 'small',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Mélanger et assortir

Voici quelques façons différentes d'utiliser différents thèmes, avec les props `accentColor`, `borderRadius` et `fontStack` ensemble.

- Utilisez le thème `lightTheme`
- Définissez la couleur d'accent sur une valeur violette personnalisée
- Définissez le rayon de bordure sur `medium`
- Définissez la pile de polices sur `system`

```tsx
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={lightTheme({
        accentColor: '#7b3fe4',
        accentColorForeground: 'white',
        borderRadius: 'medium',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

- Utilisez le thème `midnightTheme`
- Définissez la couleur d'accent sur le préréglage intégré `pink`.
- Définissez le rayon de bordure sur `small`
- Définissez la pile de polices sur `system`

```tsx
import {
  RainbowKitProvider,
  midnightTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider
      theme={midnightTheme({
        ...midnightTheme.accentColors.pink,
        borderRadius: 'small',
        fontStack: 'system',
      })}
      {...etc}
    >
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

#### Prise en charge du mode sombre

Si votre application utilise la requête média standard `prefers-color-scheme: dark` pour alterner entre les modes clair et sombre, vous pouvez éventuellement fournir un objet thème dynamique contenant les valeurs `lightMode` et `darkMode`.

```tsx
import {
  RainbowKitProvider,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => (
  <RainbowKitProvider
    theme={{
      lightMode: lightTheme(),
      darkMode: darkTheme(),
    }}
    {...etc}
  >
    {/* Your App */}
  </RainbowKitProvider>
);
```
